<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			img {
				border-radius: 100px;
				transition: all 1s;
			}
			
			.animtest1 {
				transform: translateX(200px);
			}
			
			.animtest2 {
				transform: translateX(-200px);
			}
			
			#img2 {
				float: right;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var img1=document.getElementById("img1");
				var img2=document.getElementById("img2");
				img1.className="animtest1";
				img2.className="animtest2";
			}
		</script>
	</head>

	<body>
		<img id="img1" src="img/1111.bmp" />
		<img id="img2" src="img/zxy.png" />
	</body>

</html>